<template>
  <div class="dynamicContainer">
    <div class="topCont">
      <!-- 头部 -->
      <van-nav-bar
        title="个人中心"
        left-arrow
        @click-left="onClickLeft"
        class="navheadrt"
      >
      </van-nav-bar>
      <!-- 姓名 -->
      <div class="f topNmae vfe">
        <img src="./imgs/1.png" alt />
        <span class="zw">{{ loginUserInfo.cRoleName }}</span>
        <span class="name">{{ loginUserInfo.cName }}</span>
      </div>
    </div>
    <!-- 动态 -->
    <div class="middleCont f fb">
      <div class="middleCont_left">
        <p class="top">{{ kqcount }}</p>
        <p class="bot f fc">出勤天数<van-icon name="arrow" class="right" /></p>
      </div>
      <div class="middleCont_middle"></div>
      <div class="middleCont_left">
        <p class="top">{{ count }}</p>
        <p class="bot f fc">发布动态<van-icon name="arrow" class="right" /></p>
      </div>
    </div>
    <div class="lineH1">
      <div class="pesonList">
        <div class="pesonListItem f fb" @click="todynamicOperation">
          <div class="f">
            <p class="imgp">
              <img src="./imgs/3.png" alt="" class="oneimg" />
            </p>
            <p>使用说明</p>
          </div>
          <van-icon name="arrow" class="right" />
        </div>
        <div
          class="pesonListItem f fb"
          @click="$router.push({ path: '/dynamicHelp' })"
        >
          <div class="f">
            <p class="imgp">
              <img src="./imgs/4.png" alt="" class="twoimg" />
            </p>
            <p>帮助与反馈</p>
          </div>
          <van-icon name="arrow" class="right" />
        </div>
        <div class="pesonListItem f fb" @click="showBanben = true">
          <div class="f">
            <p class="imgp">
              <img src="./imgs/5.png" alt="" class="fiveimg" />
            </p>
            <p>版本号</p>
          </div>
          <van-icon name="arrow" class="right" />
        </div>
        <div
          class="pesonListItem f fb"
          @click="$router.push({ path: '/rePwd' })"
        >
          <div class="f">
            <p class="imgp">
              <img src="./imgs/6.png" alt="" class="threeimg" />
            </p>
            <p>修改密码</p>
          </div>
          <van-icon name="arrow" class="right" />
        </div>
        <div class="pesonListItem f fb" @click="onExit">
          <div class="f">
            <p class="imgp">
              <img src="./imgs/7.png" alt="" class="fourimg" />
            </p>
            <p>退出账号</p>
          </div>
          <van-icon name="arrow" class="right" />
        </div>
      </div>
      <!--版本更新-->
      <van-popup v-model="showBanben">
        <div class="popupDiv1" v-if="isban">
          <!--有新版本-->
          <p class="title">发现新版本</p>
          <p class="desc">最新版{{ list.VerNumber }}</p>
          <p class="smallTit">更新内容：</p>
          <textarea
            class="desc noborder"
            rows="5"
            v-model="list.VerContent"
            readonly
          ></textarea>
          <div class="zzbtn f fb">
            <div class="commbtn left f fc" @click="closeBan">以后再说</div>
            <div class="commbtn right f fc" @click="toRefrsh(list.VerAddress)">
              立即更新
            </div>
          </div>
        </div>
        <div class="popupDiv1" v-else>
          <!--无新版本-->
          <p class="title">暂无新版本!!!</p>
        </div>
      </van-popup>
    </div>
  </div>
</template>
<script>
import { GetNewVersion } from "@/api/api";

export default {
  data() {
    return {
      showBanben: false,
      isban: true, //新版本
      list: {},
      currentVersion: "1.02.05", //旧版本号
      newVersion: "", //旧版本号
      loginUserInfo: JSON.parse(localStorage.getItem("loginUserInfo"))
        .loginUserInfo,
      kqcount: 0,
      count: 0,
    };
  },
  mounted() {
    this.kqcount = this.$route.query.kqcount;
    this.count = this.$route.query.count;
    var that = this;
    this.init();
    /**
     * 版本检测
     */
    //新版本号
    let newVersion = "",
      wgtUrl = "";
    document.addEventListener("plusready", () => {
      //console.log("进入plusready");
      plus.runtime.getProperty(plus.runtime.appid, (inf) => {
        // wgtVer = inf.version;
       // console.log("进入getProperty");
        //console.log(JSON.stringify(inf));
        that.currentVersion = inf.version;
      });
    });
  },
  methods: {
    // 返回按钮
    onClickLeft() {
      this.$router.push({ path: "/nav/to/dynamic" });
    },
    todynamicOperation() {
      this.$router.push({ path: "/dynamicOperation" });
    },
    init() {
      this.Request(GetNewVersion({ verType: 1 })).then((res) => {
        if (res.StatusCode == "200") {
          this.list = res.Detiel[0];
          if (this.currentVersion == res.Detiel[0].VerNumber) {
            this.isban = false;
          } else {
            this.isban = true;
          }
        } else {
          this.$message({
            type: "error",
            message: res.Message,
            center: "true",
          });
        }
      });
    },
    //立即更新
    toRefrsh(wgtUrl) {
      var that = this;
      plus.downloader
        .createDownload(
          wgtUrl,
          { filename: "_doc/update/" },
          (file, status) => {
            if (status == 200) {
              //console.log("下载更新成功：" + file.filename);
              that.installWgt(file.filename); // 安装wgt资源包
            } else {
              //console.log("下载更新失败！");
              plus.nativeUI.toast("下载更新失败！");
            }
            plus.nativeUI.closeWaiting();
          }
        )
        .start();
    },
    installWgt(path) {
      plus.nativeUI.showWaiting("安装更新");
      plus.runtime.install(
        path,
        {},
        () => {
          plus.nativeUI.closeWaiting();
          //console.log("安装更新成功！");
          plus.nativeUI.alert("更新完成！", () => {
            //  更新完成后重启应用
            plus.runtime.restart();
          });
        },
        (e) => {
          plus.nativeUI.closeWaiting();
         // console.log("安装更新失败！[" + e.code + "]：" + e.message);
          plus.nativeUI.toast("安装更新失败！[" + e.code + "]：" + e.message);
        }
      );
    },
    //关闭版本
    closeBan() {
      this.showBanben = false;
    },
    //退出账号
    onExit() {
      localStorage.clear();
      sessionStorage.clear();
      this.$router.push({ path: "/login" });
    },
  },
};
</script>
<style lang="stylus" scoped>
@import './common/common';

.lineH1 {
  width: 100%;
}

.pesonList {
  width: 90%;
  padding: 0 30px;
  margin: 0 auto;
  box-sizing: border-box;
  background: #FFFFFF;
  box-shadow: 0px 14px 16px 0px rgba(43, 102, 253, 0.07);
  border-radius: 5px;

  .pesonListItem:last-child {
    border: none;
  }

  .pesonListItem {
    width: 100%;
    height: 120px;
    border-bottom: 1px solid #C6D0DB;
    font-size: 30px;
    font-family: Microsoft YaHei;
    font-weight: 300;
    color: #4D4D4D;

    .imgp {
      width: 60px;
      margin-right: 45px;
    }

    .right {
      color: #B3B3B3;
      font-size: 40px;
    }

    .oneimg {
      width: 50px;
      height: 40px;
    }

    .fiveimg {
      width: 40px;
      height: 50px;
    }

    .twoimg {
      width: 50px;
      height: 54px;
    }

    .threeimg {
      width: 47px;
      height: 50px;
    }

    .fourimg {
      width: 50px;
      height: 50px;
    }
  }
}

.van-popup {
  background: transparent;
}

.popupDiv1 {
  width: 500px;
  background: #FFFFFF;
  border-radius: 40px;
  padding: 40px;
  box-sizing: border-box;

  .title {
    font-size: 44px;
    font-family: PingFang;
    font-weight: 500;
    color: #699FFF;
    margin-bottom: 40px;
    text-align: center;
  }

  .desc {
    font-size: 28px;
    font-family: PingFang;
    font-weight: 500;
    color: #666666;
    margin-bottom: 25px;
  }

  .noborder {
    width: 100%;
    border: 0;
    line-height: 50px;
  }

  .smallTit {
    font-size: 28px;
    font-family: PingFang;
    font-weight: 600;
    color: #333333;
    margin-bottom: 25px;
  }

  .commbtn {
    width: 206px;
    height: 68px;
    font-size: 28px;
    font-family: PingFang;
    font-weight: 500;
    border-radius: 34px;
  }

  .left {
    color: #666666;
    border: 1px solid #BFBFBF;
  }

  .right {
    background: #0078CB;
    color: #FFFFFF;
  }
}
</style>